<template>
  <div>
     <div class="home_search"> 
       <div>
        <el-form :inline="true">
          <el-form-item label="部门名称">
              <el-input v-model="pageData.deptName"></el-input>
          </el-form-item>
          <el-form-item label="部门状态" style="width:300px;">
              <el-select v-model="pageData.status">
                    <el-option value="0" label="正常">正常</el-option>
                    <el-option value="1" label="停用">停用</el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="部门状态">
              <el-button type="primary" @click="toSearch"> 搜索</el-button>
               <el-button type="success">重置</el-button>
          </el-form-item>
        </el-form>
       
        
       </div>
       <div>
        <el-button :icon="Plus" type="primary" @click="openDia">新增</el-button>
        <el-button :icon="Sort" @click="changeExpand">展开/折叠</el-button>
       </div>
     </div>
     <div>
      <el-table :data="deptData" :tree-props="{children: 'children'}" 
       row-key="deptId" :default-expand-all="isExpand" 
       :expand-row-keys="expandRowKey">
        <el-table-column label="部门名称" prop="deptName"></el-table-column>
        <el-table-column label="部门状态">
          <!-- vue3 删除slot-scope  -->
          <template #default="{row}">
            {{row.status=="0"?"正常":"禁用"}}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="排序" prop="orderNum"></el-table-column>
        <el-table-column label="操作" #default="{row}">
          <el-link :icon="Edit" type="primary" @click="toEdit(row.deptId)">编辑</el-link>
          <el-link :icon="Plus" @click="openDia"  type="primary" style="margin:0 10px;">新增</el-link>
          <el-link :icon="Delete" @click="toDel(row.deptId)"   type="primary">删除</el-link>
        </el-table-column>
      </el-table>
   
     </div>

     <!-- 添加部门的弹出层 -->
      <el-dialog :title="diaTile" v-model="deptFlag" width="40%">
           <el-form :inline="true" label-width="90px" :model="addForm"
           :rules="rules" ref="addFormRef">
              <el-form-item label="上级部门：" style="width:500px;">
                <treeSelect v-if="deptFlag" v-model:sel="addForm.parentId" :treeData="deptData"></treeSelect>
              </el-form-item>
              <el-form-item label="部门名称：" prop="deptName" >
                <el-input v-model="addForm.deptName"></el-input>
              </el-form-item>
               <el-form-item label="显示排序：" >
                   <el-input-number
                     v-model="addForm.orderNum"
                      :min="1"
                      :max="10"
                      controls-position="right"
                      size="large"
                     
                    />
              </el-form-item>
                <el-form-item label="负责人" prop="leader">
                  <el-input v-model="addForm.leader"></el-input>
              </el-form-item>
                  <IconSelect ref="iconSelect" @selected="selected" :active-icon="addForm.icon" />
               <el-form-item label="联系电话" prop="phone">
                 <el-input v-model="addForm.phone"></el-input>
              </el-form-item>
               <el-form-item label="邮箱" prop="email">
                 <el-input v-model="addForm.email"></el-input>
              </el-form-item>
               <el-form-item label="部门状态">
                 <el-radio-group v-model="addForm.status">
                  <el-radio label="正常" value="0"></el-radio>
                  <el-radio label="禁用" value="1"></el-radio>
                 </el-radio-group>
              </el-form-item>
           </el-form>
           <template #footer>
               <el-button type="primary" @click="toAdd">确定</el-button>
               <el-button type="danger" @click="close">取消</el-button>
           </template>
      </el-dialog>
  </div>
</template>
<script setup lang="ts">
 import {Plus,Sort,Edit,Delete} from '@element-plus/icons-vue'
 import {ref,reactive,watch,nextTick}  from 'vue'
 import {listDept,addDept,getDept,updateDept,delDept} from '../api/dept'
 import {handleTree} from '../utils/ruoyi'
 import treeSelect from '../components/tree-select.vue'
 import type {FormInstance,FormRules} from  'element-plus'
import {ElMessage} from 'element-plus'
import IconSelect from "@/components/IconSelect/index.vue";
//  部门列表渲染的逻辑------------------------------------------------------
 let deptData=ref([]) //表格的数据

 let isExpand=ref(false) //控制是否展开折叠属性表格
const expandRowKey =ref(['']) 


function changeExpand() {
  nextTick(()=>{
    isExpand.value = !isExpand.value;
    
    if( isExpand.value){
      expandRowKey.value = ['1']
    }else{
      expandRowKey.value = ['']
    }
  })
 
}


//  列表接口 要发送的数据
 let pageData=reactive({
   pageNum:1,
   pageSize:10,
   deptName:"", //部门名称
   status:""// 部门状态
 })
//  获取部门列表数据
 let getDeptList=async ()=>{
    let res=await listDept(pageData);
    console.log(res,"--------部门数据------")
    deptData.value=handleTree(res.data,"deptId","parentId");
    console.log(  deptData.value,"---------------------")
 }
 getDeptList();
 let toSearch=()=>{//查询
    getDeptList();
 }
// --------------------------------------------------------------------------
//  新增部门
let diaTile=ref<string>("添加部门");
let deptFlag=ref<boolean>(false)
let openDia=()=>{//打开
  deptFlag.value=true;
  diaTile.value="添加部门"
}
let close=()=>{
    deptFlag.value=false;
}
watch(deptFlag,(newVal)=>{
  if(!newVal){
    console.log(newVal,"----------")
     addForm={
      icon:'',
        deptName: "",  //部门名称
        email: "", //邮箱
        leader: "",  //负责人
        orderNum: 1,   //排序
        phone: "",  //联系电话
        status: "0",  //状态
        parentId: 0 ,//上级部门id
        deptId:"", //修改需要的部门id
        parentName:"" //修改需要的上级部门名称
     }
  }
})
let addForm=reactive({
    deptName: "",  //部门名称
    email: "", //邮箱
    leader: "",  //负责人
    orderNum: 1,   //排序
    phone: "",  //联系电话
    status: "0",  //状态
    parentId: 0 ,//上级部门id
    deptId:"", //修改需要的部门id
    parentName:"" //修改需要的上级部门名称
  })
  // 子传父 传来了 父级id
let getDeptId=(parentId:number)=>{
  // console.log(parentId,"父级id")
  addForm.parentId=parentId;
}

// 表单验证
const rules:FormRules={
  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  leader: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
}
let addFormRef=ref<FormInstance|null>() //表单实例

let toAdd=()=>{
    console.log(addForm,"准备的添加接口需要的数据")
    addFormRef.value?.validate(async (vali:boolean)=>{
        if(vali){
          if(addForm.deptId){ //调用修改接口
               let editRes=await updateDept(addForm)
                 ElMessage.success("修改成功")
          }else{ //添加接口
              let res:any=await addDept(addForm)
              console.log(res,"----------添加返回的接口")
              if(res.code==200){
                  ElMessage.success("添加成功")
              }
          }
         
              getDeptList();
               deptFlag.value=false//关闭弹出层
               addFormRef.value?.resetFields()//重置表单

        }
    })
}

// 修改部门---------------------------------------------------------------

// 1 回显

let toEdit=async (deptid:number)=>{
  // 获取部门详情接口
  let res=await getDept(deptid)
    diaTile.value="修改部门"
  console.log(res,"回显的数据")
  addForm.deptName=res.data.deptName
  addForm.email=res.data.email
  addForm.leader=res.data.leader
  addForm.phone=res.data.phone
  addForm.deptId=res.data.deptId
  addForm.status=res.data.status
  addForm.parentName=res.data.parentName//上级部门名称
 addForm.parentId=res.data.parentId//上级部门id
  deptFlag.value=true
}
// 删除-----------------------------------------
let toDel=async (deptid:number)=>{
   let res:any=await delDept(deptid)
   if(res.code==200){
     ElMessage.success("删除成功")
    getDeptList();
   }
}
// 监听数据
watch(()=>addForm.parentId,(newVal)=>{
    console.log(newVal,"-----12312--------")
},{
  deep:true
})

</script>
<style lang="scss">
  .home_search{
    width:100%;
    height: 100px;
    margin-top:20px;
  }


</style>